﻿import QtQuick 2.15
import QtQuick.Controls
import QtQuick.Controls.Basic

// 半圆按钮绘制，参考Uart2Relay项目的代码
Rectangle {
    id: control
    property alias text: text_button.text

    property color border_mouse_exited_color:  "#fff4f1"
    property color border_mouse_entered_color: "#cfe6fe"
    property color inside_released_color:      "#fefbec"
    property color inside_pressed_color:       "#F2E8E5"

    // text
    property alias pointSize: text_button.font.pointSize

    anchors.centerIn: parent
    width: 120
    height: 30
    radius: 20
    color: inside_released_color
    border.color: border_mouse_exited_color
    border.width: 2
    Text {
        id: text_button
        anchors.centerIn: parent
        color: "#595959"
        // font.family: "Comic Sans MS"
        font.pointSize: 10
        text: "RadiusButton"
    }

    state: "MouseExited"
    states: [
        State {
            name: "MouseEntered"
            PropertyChanges {
                target: control
                border.color: border_mouse_entered_color
            }
        },
        State {
            name: "MouseExited"
            PropertyChanges {
                target: control
                border.color: border_mouse_exited_color
            }
        }
    ]
    transitions: [
        Transition {
            PropertyAnimation {
                property: "border.color"
                duration: 200
            }
        },
        Transition {
            PropertyAnimation {
                property: "border.color"
                duration: 200
            }
        }
    ]

    // 放置鼠标事件监听区域
    MouseArea {
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        hoverEnabled: true
        onClicked: {
            console.log("Login Button onClicked")
        }
        onEntered: {
            control.state = "MouseEntered"
        }
        onExited: {
            control.state = "MouseExited"
        }
        onPressed: {
            control.color = inside_pressed_color
        }
        onReleased: {
            control.color = inside_released_color
        }
    }
}
